<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
              margin: 0px;
              padding: 0px;
              list-style: none;
            }
            .top{
                height: 500px;
                background: url("../新建文件夹/bg.jpg")repeat-x;
            }
            .certen{
                width: 968px;
                height: 377px;
                margin: 47px  auto  31px;
                
            }
            .under{
                width: 968px;
                height: 50px;
                
                margin: 0px auto;
            }
            .nav,.banner{
                width: 968px;
                margin: 0px auto;
                
            }
            .nav h1{
                float: left;
                
            }
            .nav ul{
                float: right;
            }
            .nav li{
                float: left;
            }
            .nav img{
                margin-top: 14px;
                width: 123px;
            }
            .nav li{
                margin-right:8px;
                margin-top: 10px;
                padding: 4px;
            }
            .nav a{
                color: white;
                text-decoration: none;
            }
            .nav li:hover{
               background-color: black;
                border-radius: 10px;
            }
            .banner {
                width: 968px;
                margin: 0px auto;
                padding-top: 74px;
               
            }
            .bannerleft {
                
                float: left;
                width: 370px;
                height: 423px;
                margin-left: 10px;
            }
            .bannerright{
                float: right;
                width: 500px;
                height: 423px;
                margin-right: 0px;

            }
            .bannerleft a {
               
               text-decoration: none;
               color: green;
                     
            }
            .bannerright {
                float: right;
                width: 490px;
            }
            .dot{float:left;display:block;margin:10px 11px 0 0;height:6px;width:6px;border-radius:5px;background-color:#999}
            .certen1{
                height: 377px;
                width: 628px;
                float: left;
            }
            .certen2{
                height:375px;
                width: 340px;
                float: right;
                
            }
            .certen1 img{
                width: 629px;
            }
            .certen1 ul{
                display: block;
                line-height: 1.em;
            }
            .certern1 li{
                float: left;
                width: 214px;
            }
            .twoli{
                padding-top: 20px;
            }
            .certen1 h2{
                padding-top: 6px;
                font-size: 15px;
            }
            .certen1 p{
                color: #999;
                padding-top: 6px;
                font-size: 15px;
            }
            .certen1 h2{
                font-weight:normal;
                font-size: 16px;
            }
            .certen1 a{
                text-decoration: none;
                color: #609700;

            }
            .list li{
                margin-bottom: 10px;
                width: 700px;
            }
            .list span{
                float: right;
            }
            .list i{
                color: chartreuse;
            }
            .list a{
                text-decoration: none;
                color: green;
            }
            .fotter{
                height: 50px;
                width: 968px;
                margin: 0px auto;
                border-top: 1px solid #d4dadf;
            }

            .fotter a{
                font-size: 13px;
                color: #888;
                text-decoration: none;
            }
            .fotter P{
                font-size: 13px;
                color: #888;
            }

            .graytext{
                color:#999
            }
        </style>
    </head>
    <body>
        <div class="top">
            <div class="nav">
                <h1>
                    <a href="#">
                        <img src="../新建文件夹/hh.png" alt="" >
                    </a>
                </h1>
                <ul>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">帮助与反馈</a>
                    </li>
                    <li>
                        <a href="">公众平台</a>
                    </li>
                    <li>
                        <a href="">开放平台</a>
                    </li>
                    <li>
                        <a href="">微信支付</a>
                    </li>
                    <li>
                        <a href="">微信广告</a>
                    </li>
                    <li>
                        <a href="">企业微信</a>
                    </li>
                    <li>
                        <a href="">表情开放平台</a>
                    </li>
                    <li>
                        <a href="">微信网页版</a>
                    </li>
                </ul>
            </div>
            <div class="banner">
                <div class="bannerleft">
                <h1>微信是一个生活方式</h1>
                <p>超过十亿人使用的手机应用</p>
                <p>支持发送语音短信、视频、图片和文字</p>
                <p>可以群聊，仅耗少量流量，适合大部分智能手机</p>
                <ul>
                    <li>
                        <a href="">
                            <img src="../新建文件夹/kk.png" alt="">
                        </a>
                    </li>
                    <li>
                        <span class="dot"></span>
                        <a href=""target="_blank">冻结或解冻微信账号</a>
                    </li>
                    <li>
                        <span class="dot"></span>
                        <a href="">自助解除登录或功能限制</a>
                    </li>
                    <li>
                        <span class="dot"></span>
                        <a href="">忘记了微信账号</a>
                    </li>
                </ul>
            </div>
            
            <div class="bannerright">
                <img src="../新建文件夹/01.png" alt="">
            </div>
            </div>
        </div>
        <div class="certen">
            <div class="certen1">
             <ul>
                 <li>
                     <img src="../新建文件夹/ii.png" alt="">
                 </li>
                 <li>
                     <h2>微信网页版</h2>
                     <p>扫一扫二维码</p>
                     <p>就能在浏览器上使用微信</p>
                     <a href="">了解更多</a>
                 </li>
                 <li class="twoli">
                     <h2>微信Mac版</h2>
                     <p>极致简洁,迅捷沟通</p>
                     <a href="">了解更多</a>
                 </li>
                 <li class="twoli">
                     <h2>微信Windows</h2>
                     <p>让沟通更方便</p>
                     <a href="">了解更多</a>
                 </li>
             </ul>
                
            </div>
            <div class="certen2">
                <div class="certen3">
                    <ul class="list">
                        <h2>最新消息</h2>
                        <li> <a href=""> 微信 8.0.1 for Android正式版发布 <i>New</i> <span>2-25</span></li></a>   
                        <li>  <a href="">  微信 8.0.2 for ios正式版发布 <i>New</i> <span>2-02</span></li></a>    
                        <li>  <a href="">微信 2.6.1 for mac正式版发布 <i>New</i> <span>1-20</span></li></a>    
                        <li>  <a href="">微信 3.0.1 for windows正式版发布 <i>New</i> <span>12-24</span></li></a>   
                        <li>  <a href="">关于部分ios9用户无法和更新微信 <i>New</i> <span>1-28</span></li></a>   
                        <li>  <a href="">微信外部链接管理规范  <span>2-11</span></li></a>  
                        <li>  <a href="">微信网页版2.1版本发布 <span>1-17</span></li></a>  
                        <li>  <a href="">微信表情开放平台上线<span>7-29</span></li></a>   
                        <li>  <a href=""> 官方辟谣公众号上线 <span>10-28</span></li></a>   
                        <li> <a href="">查看更多</li></a>
                        <h3><img src="../新建文件夹/m.png" alt="">
                        <a href="">联系我们</a></h3>  
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div class="fotter">
        <div style="float:left;text-align:left; margin-top: 10px;">
            <a href="">关于腾讯</a> <span class="graytext"> | </span>
            <a href="">服务条款</a><span class="graytext"> | </span>
            <a href="">使用规范</a><span class="graytext"> | </span> 
            <a href="">客服中心</a><span class="graytext"> | </span> 
            <a href="">隐私保护指引</a> 
            <p>© 1998 - 2021 Tencent Inc. All Rights Reserved</p> 
        </div>
        <div style="float:right;margin-top: 10px;">
             <a href="">简体中文</a> <span class="graytext"> | </span>
             <a href="">繁體中文</a><span class="graytext"> | </span>
             <a href="">English</a> </div>
    </div>
    </body>
</html>